<template>
  <!-- 扫码获取会员微信信息 -->
  <u-dialog title="获取微信" :show.sync="show" width="1200px" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">
    <el-container>
      <el-aside width="300px" style="text-align: center">
        <el-alert type="success" title="微信扫码获取会员微信信息" :closable="false" />
        <el-image :src="require('@/assets/img/qr.png')" />
        <el-button type="primary" icon="el-icon-search" @click="handleWxInfoList">获取微信信息</el-button>
      </el-aside>
      <el-main>
        <u-table
          :data="list"
          :loading="listLoading"
          :options="listOptions"
          :columns="columns"
          @selection-change="change"
        >
          <template v-slot:right>
            <el-table-column label="" align="center" fixed="right">
              <template slot-scope="{ row }">
                <el-button type="primary" @click="change(row)">选择</el-button>
              </template>
            </el-table-column>
          </template>
        </u-table>
      </el-main>
    </el-container>

  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 扫码获取会员微信信息
 */
export default {
  name: 'WxInfo',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的OPENID */
    data: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      // 表格
      columns: [
        {
          prop: 'avatar',
          label: '头像',
          width: '80',
          render: (h, params) => {
            const { avatar } = params.row
            return h('el-avatar', { props: { src: avatar }})
          }
        },
        {
          prop: 'name',
          label: '微信昵称',
          width: '140'
        },
        {
          prop: 'openid',
          label: 'OPENID',
          width: '230'
        },
        {
          prop: 'createdAt',
          label: '扫码时间',
          timestamp: true
        }
      ],
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      }
    }
  },
  methods: {
    // 获取微信列表数据
    handleWxInfoList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询分页数据
      self.api.wxinfoList().then(res => {
        // 获取分页列表数据
        self.list = res.data
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 多选事件
    change(val) {
      const { openid } = val
      this.$emit('change', openid)
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>

